<template>
  <div>
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">添加员工</span>
    </section>
    <div class="p-t-lg">
      <header>
        <div class="title">基本信息</div>
      </header>
      <div class="main clearfix">
        <section>
          <span>
            姓名
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-input
              placeholder="在这里输入姓名"
              v-model.trim="userDetail.fullName"
              clearable
            ></el-input>
          </span>
        </section>
        <section>
          <span>
            身份证
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-input
              placeholder="在这里输入身份证"
              v-model.trim="userDetail.idCard"
              maxlength="18"
              @change="idCardChange"
              clearable
            ></el-input>
          </span>
        </section>
        <section>
          <span>民族 <i class="warn">*</i></span>
          <span class="value">
            <el-select v-model.trim="userDetail.nation" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in nationOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </span>
        </section>
        <section>
          <span>性别 <i class="warn">*</i></span>
          <span class="value">
            <el-select v-model.trim="userDetail.sex" placeholder="请选择">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </section>
        <section>
          <span>
            手机号
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-input
              placeholder="在这里输入手机号"
              v-model.trim="userDetail.phone"
              maxlength="11"
              clearable
            ></el-input>
          </span>
        </section>
        <section>
          <span class="title">
            户籍类型
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-select v-model="userDetail.censusRegisterType" placeholder="请选择">
              <el-option
                v-for="item in censusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </section>
        <section>
          <span class="title">
            参保身份
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-select v-model="userDetail.insuredStatus" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in insuredStatusOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </span>
        </section>
        <section>
          <span class="title">
            职工工种
            <i class="warn"></i>
          </span>
          <span class="value">
            <el-select v-model="userDetail.typeOfWork" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in typeOfWorkOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </span>
        </section>

        <section>
          <span>
            户籍地址
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-input
              placeholder="户籍地址"
              v-model.trim="userDetail.permanentAddress"
              clearable
            ></el-input>
          </span>
        </section>
        <section>
          <span> 最高学历</span>
          <span class="value">
            <el-select
              v-model.trim="userDetail.education"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in educationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </section>
        <section>
          <span>
            联系地址
            <i class="warn">*</i>
          </span>
          <span class="value">
            <el-input
              placeholder="在这里输入联系地址"
              v-model.trim="userDetail.address"
              clearable
            ></el-input>
          </span>
        </section>
        <section>
          <span> 工资 </span>
          <span class="value">
            <el-input
              placeholder="在这里输入工资"
              v-model.trim="userDetail.wage"
              clearable
              ><template slot="append">元</template></el-input
            >
          </span>
        </section>
      </div>
    </div>
    <!--社保/公积金-->
    <div class="p-t-lg">
      <header>
        <div class="title">社保/公积金</div>
      </header>
      <div class="main clearfix">
        <div class="box">
          <section>
            <span class="title">
              缴纳项目
              <i class="warn">*</i>
            </span>
            <span class="value">
              <el-checkbox v-model="isPaySocialSecurity" @change="changeType">社保</el-checkbox>
              <el-checkbox v-model="isPayFund" @change="changeType">公积金</el-checkbox>
            </span>
          </section>
        </div>

        <div class="input-box">
          <section>
            <span class="title"> 当地社保 </span>
            <span class="value">
              <el-select v-model="userDetail.isLocalSocialSecurity" placeholder="请选择">
                <el-option
                  v-for="item in isLocalSocialSecurityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </section>
        </div>

        <div class="input-box">
          <section>
            <span class="title">
              缴纳城市
              <i class="warn">*</i>
            </span>
            <span class="value">
              <el-select
                v-model="userDetail.areaCode"
                @change="getPlatform"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in addressOptions"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
            </span>
          </section>
        </div>
        <div class="input-box">
          <section>
            <span class="title">
              缴纳平台
              <i class="warn">*</i>
            </span>
            <span class="value">
              <el-select v-model="userDetail.PId" placeholder="请选择">
                <el-option
                  v-for="item in platformOptions"
                  :key="item.platformId"
                  :label="item.platformName"
                  :value="item.platformId"
                ></el-option>
              </el-select>
            </span>
          </section>
        </div>
        <div class="input-box" v-show="isPaySocialSecurity">
          <section>
            <span class="title">社保账号</span>
            <span class="value">
              <el-input
                placeholder="请填写"
                v-model.trim="userDetail.socialSecurityAccount"
              ></el-input>
            </span>
          </section>
        </div>
        <div class="input-box" v-show="isPaySocialSecurity">
          <section>
            <span class="title">社保基数 <i class="warn">*</i></span>
            <span class="value">
              <el-input
                placeholder="请填写"
                v-model.trim="userDetail.socialSecurityBasic"
                @blur="getPaymentAmount"
              ></el-input>
            </span>
          </section>
          <div
            class="data-range"
            v-if="socialSecurityBasicValMin > 0 && socialSecurityBasicValMax > 0"
          >
            取值范围：{{ socialSecurityBasicValMin }}~{{ socialSecurityBasicValMax }}
          </div>
        </div>
        <div class="input-box" v-show="isPaySocialSecurity">
          <section>
            <span class="title"> 社保起缴月份 <i class="warn">*</i></span>
            <span class="value">
              <el-date-picker
                v-model="userDetail.socialSecurityDate"
                type="month"
                @change="socialMonthChange"
                format="yyyy 年 MM 月"
                value-format="yyyy-MM"
                placeholder="选择月份"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </span>
          </section>
        </div>

        <div class="input-box" v-show="isPayFund">
          <section>
            <span class="title">公积金账号</span>
            <span class="value">
              <el-input
                placeholder="请填写"
                v-model.trim="userDetail.fundAccount"
              ></el-input>
            </span>
          </section>
        </div>
        <div class="input-box" v-show="isPayFund">
          <section>
            <span class="title">公积金基数 <i class="warn">*</i></span>
            <span class="value">
              <el-input
                placeholder="请填写"
                v-model.trim="userDetail.fundBasic"
                @blur="getPaymentAmount"
              ></el-input>
            </span>
          </section>
          <div class="data-range" v-if="fundBasicValMin > 0 && fundBasicValMax > 0">
            取值范围：{{ fundBasicValMin }}~{{ fundBasicValMax }}
          </div>
        </div>
        <div class="input-box" v-show="isPayFund">
          <section>
            <span class="title"> 公积金起缴月份 <i class="warn">*</i></span>
            <span class="value">
              <el-date-picker
                v-model="userDetail.fundDate"
                type="month"
                @change="gjjMonthChange"
                format="yyyy 年 MM 月"
                value-format="yyyy-MM"
                placeholder="选择月份"
                :picker-options="fundPickerOptions"
              ></el-date-picker>
            </span>
          </section>
        </div>
      </div>
    </div>
    <!--基数表格-->
    <div class="p-t-lg">
      <header>
        <div class="title">基数列表</div>
        <div class="edit" @click="addBasic()">
          <i class="iconfont iconadd1"></i>&nbsp;新增
        </div>
      </header>
      <div class="table">
        <el-table
          show-summary
          :summary-method="getSummaries"
          :data="basicInfoTable"
          border
          v-loading="loading"
        >
          <el-table-column width="80" prop="paymentId" label="ID"></el-table-column>
          <el-table-column prop="paymentName" label="项目名称"></el-table-column>
          <el-table-column
            prop="paymentItemType"
            label="项目类别"
            :formatter="paymentTypeIdFilter"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="paymentType"
            label="缴纳方式"
            :formatter="typeFilter"
          ></el-table-column>
          <el-table-column label="基数">
            <template slot-scope="scope">
              {{
                scope.row.paymentType == 1
                  ? scope.row.basic
                  : scope.row.defaultVal | baseFilter
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="defaultVal"
            label="默认值"
            :formatter="defaultValFormatter"
          ></el-table-column>
          <el-table-column label="公司比例" prop="companyVal" :formatter="valueFormatter">
          </el-table-column>
          <el-table-column
            label="公司金额"
            prop="companyAmount"
            :formatter="signFormatter"
          >
          </el-table-column>
          <el-table-column label="个人比例" prop="personVal" :formatter="valueFormatter">
          </el-table-column>
          <el-table-column
            label="个人金额"
            prop="personAmount"
            :formatter="signFormatter"
          >
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :disabled="
                  scope.row.paymentItemType == 1 || scope.row.paymentItemType == 2
                "
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="remove(scope.row.companyPaymentId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--证件照片/扫描件-->
    <div class="p-t-lg">
      <header class="clearfix">
        <div class="title">证件照片/扫描件</div>
      </header>
      <div class="main">
        <div class="clearfix">
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading2" @click="showImg(0)">
              <el-image
                v-if="userDetail.idCardFrontPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.idCardFrontPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证正面照片(头像面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 2)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading3" @click="showImg(1)">
              <el-image
                v-if="userDetail.idCardBackPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.idCardBackPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证反面照片(国徽面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 3)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading4" @click="showImg(2)">
              <el-image
                v-if="userDetail.residenceBookMainPath"
                style="width: 100%; height: 100%"
                :src="userDetail.residenceBookMainPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本主页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 4)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading5" @click="showImg(3)">
              <el-image
                v-if="userDetail.residenceBookPersonalPath"
                style="width: 100%; height: 100%"
                :src="userDetail.residenceBookPersonalPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本个人页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 5)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-head" v-loading="isLoading1" @click="showImg(4)">
              <el-image
                v-if="userDetail.personPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.personPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>二寸白底免冠照</p>
            <ul class="tip-head">
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 1)" />
              </li>
            </ul>
          </div>
        </div>
        <ul class="explain">
          <li>说明</li>
          <li>1.照片中证件不可以被遮挡，需清晰看到文字信息</li>
          <li>2.照片中证件需为原件，请勿上传复印件照片</li>
          <li>3.仅支持jpg, jpeg, png格式的图片</li>
        </ul>
      </div>
    </div>
    <div class="button-box">
      <el-button @click="goBack()">返回</el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit()"
        >保存</el-button
      >
    </div>

    <!--新增对话框-->
    <el-dialog
      title="新增缴纳项目"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      width="600px"
    >
      <el-form :model="addItem">
        <el-form-item label="项目类别" :label-width="formLabelWidth">
          <el-select
            v-model="addItem.paymentType"
            @change="paymentChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in itemClassification"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改对话框-->
    <el-dialog
      title="编辑缴纳项目"
      :visible.sync="dialogEdit"
      :close-on-click-modal="false"
      :show-close="false"
      width="600px"
      center
    >
      <el-form :model="form">
        <el-form-item label="缴纳项目" :label-width="formLabelWidth">
          <el-select v-model="form.companyPaymentId" disabled>
            <el-option
              v-for="item in areaPaymentOptions"
              :key="item.companyPaymentId"
              :label="item.paymentName"
              :value="item.companyPaymentId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴纳方式" :label-width="formLabelWidth">
          <el-select v-model="form.paymentType" disabled>
            <el-option
              v-for="item in paymentTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.paymentType == 0"
          label="默认值"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.defaultVal"
            disabled
            placeholder="请输入默认值"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.paymentType == 1"
          label="基数"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.basic" clearable placeholder="请输入基数"
            ><template slot="append">元</template></el-input
          >
        </el-form-item>
        <p class="tip" v-if="form.paymentType == 1">
          提示：基数取值范围必须在{{ form.baseValMin }}~{{ form.baseValMax }}之间
        </p>
        <el-form-item
          label="公司比例"
          v-if="form.paymentType == 1"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.companyVal"
            suffix-icon="iconfont iconbaifenbi"
            placeholder="请输入公司比例"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="个人比例"
          v-if="form.paymentType == 1"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.personVal"
            suffix-icon="iconfont iconbaifenbi"
            placeholder="请输入个人比例"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import commonData from "@/assets/js/commonData";
import { requestApiPost, requestApiFilePost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "addEmployee",
  data() {
    return {
      //设置日期组件
      pickerOptions: {
        // disabledDate(time) {
        //   //获取上个月的毫秒数
        //   let date = new Date();
        //   let pDate = new Date(
        //     date.getFullYear(),
        //     date.getMonth() - 1,
        //     date.getDate()
        //   ).getTime();
        //   return time.getTime() > Date.now() || time.getTime() < pDate;
        // },
        disabledDate(time) {
          //获取下个月的毫秒数
          let date = new Date();
          let nDate = new Date(
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
          ).getTime();
          return time.getTime() > nDate;
        },
      },
      fundPickerOptions: {
        // disabledDate(time) {
        //   //获取上个月的毫秒数
        //   let date = new Date();
        //   let pDate = new Date(date.getFullYear(), 1, 0).getTime();
        //   let nDate = new Date(date.getFullYear() + 1, 0, 0).getTime();
        //   return time.getTime() < pDate || time.getTime() > nDate;
        // },
        disabledDate(time) {
          //获取下个月的毫秒数
          let date = new Date();
          let nDate = new Date(
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
          ).getTime();
          return time.getTime() > nDate;
        },
      },
      addItem: {},
      loading: false,
      isLoading5: false,
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      isLoading4: false,
      submitLoading: false,
      areaPaymentOptions: [],
      infoDialog: false,
      userDetail: {
        country: "中国",
        nation: "汉族",
        sex: 1,
        censusRegisterType: 1,
        isLocalSocialSecurity: "0",
      },
      itemClassification: [],
      platformOptions: [],
      formLabelWidth: "160px",
      srcList: [],
      imgList: [],
      sexOptions: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      dialogFormVisible: false,
      dialogEdit: false,
      isPayFund: true,
      isPaySocialSecurity: true,
      form: {},
      addressOptions: [],
      censusOptions: [],
      cityCode: "",
      setSocialMonth: "",
      setGjjMonth: "",
      paymentList: [],
      paymentTypeOptions: [
        {
          value: "0",
          label: "值",
        },
        {
          value: "1",
          label: "比例",
        },
      ],
      nationOptions: [],
      educationOptions: [],
      isLocalSocialSecurityOptions: [
        {
          value: "0",
          label: "交过",
        },
        {
          value: "1",
          label: "未交过",
        },
      ],
      basicInfoTable: [], //缴纳项目
      socialSecurityBasicValMax: "",
      socialSecurityBasicValMin: "",
      fundBasicValMax: "",
      fundBasicValMin: "",
      insuredStatusOptions: [],
      typeOfWorkOptions: [],
    };
  },
  methods: {
    //根据身份证获取性别
    idCardChange(idCard) {
      if (base.isCardId(idCard)) {
        let sex = base.getSexByIdCard(idCard);
        this.$set(this.userDetail, "sex", sex);
        //查询是否存在
      }
    },
    //处理合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }

        if (column.property == "companyAmount" || column.property == "personAmount") {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return base.accAdd(prev, curr);
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        }
      });

      return sums;
    },
    //删除区域缴纳项目
    remove(companyPaymentId) {
      let index = this.basicInfoTable.findIndex((e) => {
        return e.companyPaymentId == companyPaymentId;
      });
      this.basicInfoTable.splice(index, 1);
    },
    //修改
    edit(info) {
      this.form = JSON.parse(JSON.stringify(info));
      this.dialogEdit = true;
    },
    //获取企业区域缴纳项目
    getAreaPayment() {
      this.areaPaymentOptions = [];
      var reqData = {
        companyId: this.$route.query.companyId,
        areaPaymentId: "",
        current: 1,
        pageSize: 999,
        areaCode: this.userDetail.areaCode ? this.userDetail.areaCode : "",
      };
      let reqReport = reqRep({
        traCode: "_LIST_COMPANY_PAYMENT",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.areaPaymentOptions = resReport.data.records || [];

          /**直接赋值给表格 */
          for (let index = 0; index < this.areaPaymentOptions.length; index++) {
            this.areaPaymentOptions[index].paymentTypeId = this.areaPaymentOptions[
              index
            ].paymentItemType;
          }

          this.baseList = this.areaPaymentOptions;
          this.changeType();
        }
      });
    },
    gjjMonthChange() {},
    //修改社保起缴月份
    socialMonthChange() {},
    //判断期缴月份
    judgeMonth(type) {
      let timeValue = "";
      if (type == "1") {
        timeValue = this.setSocialMonth;
        if (
          timeValue.split("-")[0] > this.userDetail.socialSecurityYears.split("-")[0] ||
          timeValue.split("-")[1] > this.userDetail.socialSecurityYears.split("-")[1]
        ) {
          this.$message.warning("月份不符合规则");
          this.userDetail.socialSecurityYears = "";
          return;
        }
      } else {
        timeValue = this.setGjjMonth;
        if (
          timeValue.split("-")[0] > this.userDetail.gjjPayYears.split("-")[0] ||
          timeValue.split("-")[1] > this.userDetail.gjjPayYears.split("-")[1]
        ) {
          this.$message.warning("月份不符合规则");
          this.userDetail.gjjPayYears = "";
          return;
        }
      }
    },
    //展示指定图片
    showImg(i) {
      this.srcList = [];
      this.srcList.push(this.imgList[i]);
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
    //新增基数
    addBasic() {
      if (!this.userDetail.areaCode) {
        this.$message.warning("请选择缴纳城市");
        return;
      }
      if (this.areaPaymentOptions.length <= 0) {
        this.$message.warning("请先新增区域缴纳");
        return;
      }
      this.$set(this.addItem, "paymentType", "");
      this.dialogFormVisible = true;
    },
    //确认新增缴纳项目
    confirmAdd() {
      for (let index = 0; index < this.baseList.length; index++) {
        for (let j = 0; j < this.basicInfoTable.length; j++) {
          if (this.baseList[index].paymentId == this.basicInfoTable[j].paymentId) {
            this.$message.warning("缴纳项目重复，请重新选择");
            return;
          }
        }
      }

      this.basicInfoTable = [...this.basicInfoTable, ...this.baseList];
      //paymentItemType 1-社保 2-公积金
      // 社保 isPaySocialSecurity  公积金 isPayFund
      this.basicInfoTable = this.basicInfoTable
        .filter((e) => {
          if (!this.isPaySocialSecurity) {
            return e.paymentItemType != "1";
          } else {
            return e;
          }
        })
        .filter((e) => {
          if (!this.isPayFund) {
            return e.paymentItemType != "2";
          } else {
            return e;
          }
        });

      for (let index = 0; index < this.baseList.length; index++) {
        //社保赋值
        if (this.baseList[index].paymentItemType == "1") {
          if (this.baseList[index].paymentType === "1") {
            //没有社保基数直接赋值
            if (!this.userDetail.socialSecurityBasic) {
              this.$set(
                this.userDetail,
                "socialSecurityBasic",
                this.baseList[index].basic
              );
            }
          }
          if (this.baseList[index].paymentType === "0") {
            if (!this.userDetail.socialSecurityBasic) {
              this.$set(
                this.userDetail,
                "socialSecurityBasic",
                this.baseList[index].defaultVal
              );
            }
          }
          //社保范围
          this.socialSecurityBasicValMax = this.baseList[index].baseValMax || 0;
          this.socialSecurityBasicValMin = this.baseList[index].baseValMin || 0;
        }

        //公积金赋值
        if (this.baseList[index].paymentItemType == "2") {
          if (this.baseList[index].paymentType === "1") {
            if (!this.userDetail.fundBasic) {
              this.$set(this.userDetail, "fundBasic", this.baseList[index].basic);
            }
          }
          if (this.baseList[index].paymentType === "0") {
            if (!this.userDetail.fundBasic) {
              this.$set(this.userDetail, "fundBasic", this.baseList[index].defaultVal);
            }
          }

          //公积金范围
          this.fundBasicValMax = this.baseList[index].baseValMax || 0;
          this.fundBasicValMin = this.baseList[index].baseValMin || 0;
        }
      }

      this.dialogFormVisible = false;
      //获取缴纳项目比例的金额
      this.getPaymentAmount();
    },
    //确认修改缴纳项目
    confirmUpdate() {
      if (!this.form.paymentType || !this.form.companyPaymentId) {
        this.$message.warning("信息不完整");
        return;
      }
      if (this.form.paymentType == 0) {
        if (!this.form.defaultVal) {
          this.$message.warning("请输入默认值");
          return;
        }
      } else {
        if (!this.form.basic || !this.form.companyVal || !this.form.personVal) {
          this.$message.warning("请输入比例");
          return;
        }
        if (
          Number(this.form.basic) < Number(this.form.baseValMin) ||
          Number(this.form.basic) > Number(this.form.baseValMax)
        ) {
          this.$message.warning("基数错误，请输入范围中的值");
          return;
        }
      }
      let data = JSON.parse(JSON.stringify(this.form));

      let index = this.basicInfoTable.findIndex((e) => {
        return e.companyPaymentId == data.companyPaymentId;
      });
      this.basicInfoTable.splice(index, 1, data);
      this.dialogEdit = false;
      this.getPaymentAmount();
    },
    //选择区域项目
    paymentChange(e) {
      let data = this.areaPaymentOptions.filter((a) => {
        return a.paymentItemType == e;
      });
      if (data.length > 0) {
        for (let index = 0; index < data.length; index++) {
          data[index].paymentTypeId = data[index].paymentItemType;
        }

        this.baseList = data;
      } else {
        this.$message.warning("暂无对应缴纳项目，请先添加");
        return;
      }
    },
    //获取缴纳项目比例的金额
    getPaymentAmount() {
      //paymentType==1 比例
      //paymentItemType==1 社保 paymentItemType==2 公积金
      //userDetail.socialSecurityBasic 社保基数 userDetail.fundBasic 公积金基数
      for (let index = 0; index < this.basicInfoTable.length; index++) {
        //比例
        if (this.basicInfoTable[index].paymentType == 1) {
          //社保/公积金
          if (
            this.basicInfoTable[index].paymentItemType == 1 ||
            this.basicInfoTable[index].paymentItemType == 2
          ) {
            //基数
            let baseVal = 0;
            let companyVal = base.accDiv(this.basicInfoTable[index].companyVal, 100) || 0;
            let personVal = base.accDiv(this.basicInfoTable[index].personVal, 100) || 0;

            if (this.basicInfoTable[index].paymentItemType == 1) {
              baseVal = this.userDetail.socialSecurityBasic || 0;
            } else if (this.basicInfoTable[index].paymentItemType == 2) {
              baseVal = this.userDetail.fundBasic || 0;
            }

            let companyAmount = base.accMul(baseVal, companyVal) || 0;
            let personAmount = base.accMul(baseVal, personVal) || 0;

            if (this.basicInfoTable[index].paymentItemType == 2) {
              //公积金四舍五入取整
              companyAmount = Number(companyAmount.toFixed(0));
              personAmount = Number(personAmount.toFixed(0));
            } else if (this.basicInfoTable[index].paymentItemType == 1) {
              //社保四舍五入保留2位小数
              companyAmount = Number(companyAmount.toFixed(2));
              personAmount = Number(personAmount.toFixed(2));
            }

            //修改表格基数
            this.$set(this.basicInfoTable[index], "basic", baseVal);
            this.$set(this.basicInfoTable[index], "companyAmount", companyAmount);
            this.$set(this.basicInfoTable[index], "personAmount", personAmount);
          } else {
            //其他项目

            //基数
            let baseVal = this.basicInfoTable[index].basic || 0;

            let companyVal = base.accDiv(this.basicInfoTable[index].companyVal, 100) || 0;
            let personVal = base.accDiv(this.basicInfoTable[index].personVal, 100) || 0;

            let companyAmount = base.accMul(baseVal, companyVal) || 0;
            let personAmount = base.accMul(baseVal, personVal) || 0;

            //四舍五入保留2位小数
            companyAmount = Number(companyAmount.toFixed(2));
            personAmount = Number(personAmount.toFixed(2));

            this.$set(this.basicInfoTable[index], "companyAmount", companyAmount);
            this.$set(this.basicInfoTable[index], "personAmount", personAmount);
          }
        } else {
          //值
          this.$set(this.basicInfoTable[index], "companyAmount", 0);
          this.$set(this.basicInfoTable[index], "personAmount", 0);
        }
      }
    },
    //获取缴纳城市
    getAddress() {
      var reqData = {
        grade: 1,
        isStart: 0,
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_AREA", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.addressOptions = resReport.data.records;
        }
      });
    },
    //获取平台
    getPlatform() {
      var reqData = {
        PName: "",
        areaCode: this.userDetail.areaCode ? this.userDetail.areaCode : "",
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_PAY_PLATFORM", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.platformOptions = resReport.data.records;
          this.getAreaPayment();
        }
      });
    },
    //修改类型
    changeType() {
      this.basicInfoTable = [];
      this.confirmAdd();
    },
    //上传
    upImg(e, type) {
      let that = this;
      switch (type) {
        case 1:
          this.isLoading1 = true;
          break;
        case 2:
          this.isLoading2 = true;
          break;
        case 3:
          this.isLoading3 = true;
          break;
        case 4:
          this.isLoading4 = true;
          break;
        case 5:
          this.isLoading5 = true;
          break;
      }

      requestApiFilePost(e.target.files[0]).then((data) => {
        let resReport = resRep(data);
        e.target.value = "";
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          switch (type) {
            case 1:
              this.isLoading1 = false;
              break;
            case 2:
              this.isLoading2 = false;
              break;
            case 3:
              this.isLoading3 = false;
              break;
            case 4:
              this.isLoading4 = false;
              break;
            case 5:
              this.isLoading5 = false;
              break;
          }
          if (type == 1) {
            that.$set(
              that.userDetail,
              "personPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "personPhotoId", resReport.data.fileId);
          } else if (type == 2) {
            that.$set(
              that.userDetail,
              "idCardFrontPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "idCardFrontPhotoId", resReport.data.fileId);
          } else if (type == 3) {
            that.$set(
              that.userDetail,
              "idCardBackPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "idCardBackPhotoId", resReport.data.fileId);
          } else if (type == 4) {
            that.$set(
              that.userDetail,
              "residenceBookMainPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "residenceBookMainId", resReport.data.fileId);
          } else if (type == 5) {
            that.$set(
              that.userDetail,
              "residenceBookPersonalPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "residenceBookPersonalId", resReport.data.fileId);
          }
          this.imgList = [
            that.userDetail.idCardFrontPhotoPath,
            that.userDetail.idCardBackPhotoPath,
            that.userDetail.residenceBookMainPath,
            that.userDetail.residenceBookPersonalPath,
            that.userDetail.personPhotoPath,
          ];
        }
      });
    },
    //保存
    submit() {
      if (!this.userDetail.fullName) {
        this.$message.warning("请输入姓名");
        return;
      }
      if (!base.isCardId(this.userDetail.idCard)) {
        this.$message.warning("身份证号码格式不正确");
        return;
      }
      if (!base.isPoneAvailable(this.userDetail.phone)) {
        this.$message.warning("手机号码格式不正确");
        return;
      }

      if (!this.userDetail.censusRegisterType) {
        this.$message.warning("请选择户籍类型");
        return;
      }
      if (!this.userDetail.insuredStatus) {
        this.$message.warning("请选择参保身份");
        return;
      }
      if (!this.userDetail.permanentAddress) {
        this.$message.warning("请输入户籍地址");
        return;
      }
      if (!this.userDetail.address) {
        this.$message.warning("请输入联系地址");
        return;
      }
      // if (
      //   this.userDetail.isLocalSocialSecurity != 1 &&
      //   this.userDetail.isLocalSocialSecurity != 0
      // ) {
      //   this.$message.warning("请选择是否当地交过社保");
      //   return;
      // }
      if (!this.userDetail.areaCode) {
        this.$message.warning("请选择缴纳城市");
        return;
      }

      if (this.basicInfoTable.length <= 0) {
        this.$message.warning("请添加缴纳项目");
        return;
      }
      if (!this.userDetail.PId) {
        this.$message.warning("请选择缴纳平台");
        return;
      }

      if (
        this.isPaySocialSecurity &&
        (parseFloat(this.userDetail.socialSecurityBasic) <
          parseFloat(this.socialSecurityBasicValMin) ||
          parseFloat(this.userDetail.socialSecurityBasic) >
            parseFloat(this.socialSecurityBasicValMax))
      ) {
        this.$message.warning("请输入符合规则的社保基数");
        return;
      }

      if (this.isPaySocialSecurity && !this.userDetail.socialSecurityDate) {
        this.$message.warning("请选择社保起缴月份");
        return;
      }

      if (
        this.isPayFund &&
        (parseFloat(this.userDetail.fundBasic) < parseFloat(this.fundBasicValMin) ||
          parseFloat(this.userDetail.fundBasic) > parseFloat(this.fundBasicValMax))
      ) {
        this.$message.warning("请输入符合规则的公积金基数");
        return;
      }

      if (this.isPayFund && !this.userDetail.fundDate) {
        this.$message.warning("请选择公积金起缴月份");
        return;
      }

      var reqData = JSON.parse(JSON.stringify(this.userDetail));
      reqData.paymentMethod = "2"; //公司全缴
      reqData.socialSecurityBasic = parseFloat(reqData.socialSecurityBasic) || 0;
      reqData.fundBasic = parseFloat(reqData.fundBasic) || 0;

      reqData.basicInfo = this.basicInfoTable;
      reqData.isPayFund = this.isPayFund ? 1 : 2;
      reqData.isPaySocialSecurity = this.isPaySocialSecurity ? 1 : 2;
      reqData.isJobFirst = 0; //0入职；1不入职
      reqData.companyId = this.$route.query.companyId;

      this.submitLoading = true;
      let reqReport = reqRep({ traCode: "_ADD_PERSON_IN_JOB", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.submitLoading = false;
        } else {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.goBack();
          this.submitLoading = false;
        }
      });
    },
    typeFilter(a, b, c) {
      if (c == 1) {
        return "比例";
      } else {
        return "值";
      }
    },
    defaultValFormatter(a, b, c) {
      if (c >= 0) {
        return c;
      } else {
        return "-";
      }
    },
    valueFormatter(a, b, c) {
      if (c > 0) {
        return c + "%";
      } else {
        return "0";
      }
    },
    paymentTypeIdFilter(a, b, c) {
      return this.itemClassification[c].label;
    },
    signFormatter(a, b, c) {
      return c + "元";
    },
  },
  filters: {
    dateFilter(val) {
      if (val) {
        return base.timeSwitch(val);
      }
    },
    monthFilter(val) {
      if (val) {
        return base.monthSwitch(val);
      }
    },
    registerTypeFilter(val) {
      if (val == 1) {
        return "本地城镇";
      } else if (val == 2) {
        return "本地农村";
      } else if (val == 3) {
        return "外地城镇";
      } else if (val == 4) {
        return "外地农村";
      } else if (val == 5) {
        return "外籍人员";
      }
    },
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
  },
  created() {
    this.insuredStatusOptions = commonData.insuredStatusOptions;
    this.typeOfWorkOptions = commonData.typeOfWorkOptions;
    this.nationOptions = commonData.nationOptions;
    this.educationOptions = commonData.educationOptions;
    this.censusOptions = commonData.censusOptions;
    this.itemClassification = commonData.itemClassification;
    this.$set(this.userDetail, "insuredStatus", this.insuredStatusOptions[0]);
    this.getAddress();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
}
.header i {
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.add {
  float: right;
  color: #666;
  cursor: pointer;
}
.add:hover {
  color: #13cb6e;
}
.el-input,
.el-select {
  width: 220px;
}
.leave {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.leave .message {
  display: inline-block;
  line-height: 34px;
}
.leave-pointer {
  float: right;
}
.leave-pointer span {
  color: #666;
  margin-left: 20px;
  cursor: pointer;
}
.leave-pointer .reset:hover {
  color: #13cb6e;
}
.leave-pointer i {
  font-weight: bold;
  padding-right: 5px;
}
.leave-pointer .btn {
  height: 34px;
  line-height: 14px;
  padding: 8px;
  color: #fff;
  background-color: #13cb6e;
}
.change {
  display: inline-block;
  cursor: pointer;
  padding: 20px 20px 0;
}
.change i {
  color: #13cb6e;
  font-weight: bold;
  vertical-align: top;
}
.change:hover {
  color: #13cb6e;
}
.staff-detail-general {
  margin: 30px 0;
}
.p-l-xxl {
  padding-left: 44px;
}
.p-l-xxl .name {
  font-size: 24px;
  font-weight: 700;
}
.p-l-xxl .p-l {
  color: #666;
  font-size: 14px;
  padding-left: 15px;
}
.mt {
  color: #999;
  padding: 20px 0 0 44px;
}
.mt ul {
  float: left;
  width: 50%;
}
.mt ul li {
  margin-bottom: 5px;
}
.mt i {
  color: #fff;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-style: normal;
  border-radius: 3px;
  cursor: pointer;
  background-color: #13cb6e;
}
.p-t-lg {
  clear: both;
  padding: 30px 44px;
  border-top: 1px solid #eee;
}
header .title {
  display: inline-block;
  font-size: 18px;
}
header .edit {
  float: right;
  color: #666;
  cursor: pointer;
}
.edit:hover {
  color: #13cb6e;
}
.edit i {
  vertical-align: bottom;
}
.main {
  margin-top: 30px;
}
.main > section {
  float: left;
  padding-bottom: 15px;
  width: 50%;
}
.main span {
  font-size: 14px;
  color: #666;
}
.main > section span:first-child {
  display: inline-block;
  width: 120px;
}
.warn {
  color: #f56c6c;
}
.main .value {
  padding-left: 5px;
  color: #666;
}
.family {
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 3px;
}
.family .info {
  display: inline-block;
}
.info .f-name,
.word-address {
  color: #666 !important;
}
.info li {
  margin-bottom: 5px;
}
.info span {
  display: inline-block;
  margin-right: 20px;
}
.family .operation {
  float: right;
  text-align: right;
}
.operation > span {
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
}
.operation > span:hover {
  color: #13cb6e;
}
.img-bj {
  position: relative;
  width: 225px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head {
  position: relative;
  width: 108px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
/* .img-head img,
.img-bj img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  border-radius: 4px;
} */

.img-box p {
  color: #999;
  font-size: 12px;
}
.tip {
  color: #f56c6c;
  font-size: 12px;
  padding-left: 120px;
  text-align: center;
  margin-bottom: 4px;
}
.img-box {
  float: left;
  margin: 0 10px 10px 0;
}
.img-box .tip-head {
  color: #999;
  width: 108px;
  margin: 0 10px 10px 0;
}
.img-box .upBtn {
  margin-top: 10px;
  position: relative;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #13cb6e;
}
.img-box .upBtn input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.explain {
  color: #999;
  margin-top: 10px;
}
.box {
  margin-right: 40px;
  margin-bottom: 20px;
}
.input-box {
  position: relative;
  float: left;
  width: 50%;
  margin-bottom: 22px;
}
.input-box .title,
.box .title {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 113px;
  color: #666;
}

.input-box .value {
  display: inline-block;
  width: 220px;
}
.input-box p {
  padding-top: 4px;
  padding-left: 146px;
  font-size: 12px;
  color: #999;
}
.data-range {
  position: absolute;
  bottom: -18px;
  left: 146px;
  font-size: 12px;
  color: #f56c6c;
}
.button-box {
  clear: both;
  border-top: 1px solid #eee;
  padding: 30px;
}
.button-box > div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
.table {
  margin-top: 20px;
}
</style>
